<script setup lang='ts'>
import { getPrivateList } from '@/api/message';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';


const router = useRouter()
// 获取私信列表
const userList = ref()
const getBlogList = async () => {
  const res = await getPrivateList()
  userList.value = res.data.data
}
onMounted(() => getBlogList())

// 去聊天页面
const toPrivateChat = (id: any,username: any) => {
  router.push({
    path: '/chat',
    query: {
      id,
      username,
      userType: 1
    }
  })
}
// 下拉刷新
const loading = ref(false)
const onRefresh = () => {
  setTimeout(async () => {
    loading.value = false;
    await getBlogList()
  }, 1000);
}
</script>
<template>
  <van-sticky>
    <van-nav-bar
        title="私信"
        left-arrow
        @click-left="$router.back()"
    >
    </van-nav-bar>
  </van-sticky>
  <van-pull-refresh v-model="loading" @refresh="onRefresh"  success-text="刷新成功">
    <van-cell-group v-if="userList">
      <van-cell  v-for="user in userList" @click="toPrivateChat(user.userId,user.username)">
        <template #title>
          <span class="title">{{ user.username }}</span>
        </template>
        <template #label>
          <span class="title">{{ user.lastMessage}}</span>
        </template>
        <template #value>
          <span>{{ user.lastMessageDate }}</span>
        </template>
        <template #icon>
          <van-image fit="fill" class="team_img" round :src="user.avatarUrl" />
        </template>
      </van-cell>
    </van-cell-group>
    <van-empty
      v-if="!userList"
      style="margin-top: 100px;"
      image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
      image-size="80"
      description="暂无其他私信"
    />
  </van-pull-refresh>
</template>
<style scoped >
.title{
  margin-left: 10px;
}
.team_img{
  height: 50px;
  width: 50px;
}
</style>
